<template>
	<view class="main flex_col">
		<!-- nav -->
		<u-navbar fixed placeholder bgColor="none" leftIconColor="#fff" @leftClick="leftClick">
			<view class="rule flex_center_align" slot="right" @click="showRule = true">
				<text>规则说明</text>
			</view>
		</u-navbar>
		<!-- 小竹叶数量 -->
		<view class="content_top justify_between_center">
			<view class="top_item flex_col_center">
				<text class="item_title">小竹叶（总）</text>
				<text class="item_num">{{ userInfo.money }}</text>
			</view>
		</view>

		<!-- 菜单1 -->
		<view class="menu flex">
			<view class="menu_li flex1 flex_col_center" v-for="(item, index) in navList" :key="index" @click="clickMenu(item)">
				<image :src="item.icon" mode=""></image>
				<text class="menu_title">{{ item.name }}</text>
			</view>
		</view>
		<view class="middle_title">小竹叶获得途径</view>
		<!-- 菜单2 -->
		<view class="menu_ul">
			<view class="menu_item" v-for="(item, index) in menuList" :key="index" @click="clickMenu(item)">
				<image :src="item.icon" class="menu_icon"></image>
				<text class="title flex1">{{ item.name }}</text>
				<uni-icons type="forward" color="#333" size="16"></uni-icons>
			</view>
		</view>
		<u-popup :show="showRule" @close="showRule = false" round="10" mode="center" closeable>
			<view class="gz-pop flex_col">
				<text class="gz-t">规则说明</text>
				<u-parse class="parse" :content="content"></u-parse>
			</view>
		</u-popup>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../pages/my/bambooLeaf"></script>

<style lang="scss" scoped>
.main {
	position: relative;
	height: 100vh;
	background-color: #F8F8F8;
	overflow: hidden;

	&::after {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		content: '';
		height: 480rpx;
		background: linear-gradient(180deg, #297AFE 0%, #47B1FD 100%);
	}

	.rule {
		width: 127rpx;
		height: 46rpx;
		border-radius: 23rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	>* {
		position: relative;
		z-index: 2;
	}


	.content_top {
		margin: 0 auto;
		width: 680rpx;
		height: 211rpx;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 20rpx;

		.line {
			width: 1rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 33rpx;
		}

		.top_item {
			margin: 0 auto;
			color: #FFFFFF;
			overflow: hidden;

			.item_title {
				font-size: 26rpx;
			}

			.item_num {
				margin-top: 20rpx;
				font-size: 60rpx;
			}

		}
	}



	.menu {
		position: relative;
		height: 160rpx;
		background-color: #fff;
		margin: 40rpx 35rpx 0;
		box-shadow: 0px 4rpx 18rpx 1rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;

		.menu_li {
			padding-top: 26rpx;

			image {
				width: 65rpx;
				height: 65rpx;
			}

			.menu_title {
				margin-top: 6rpx;
				font-size: 28rpx;
				line-height: 50rpx;
			}
		}
	}

	.middle_title {
		margin: 40rpx 35rpx 0;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}

	.menu_ul {
		padding: 0 35rpx;
		margin-top: 20rpx;

		.menu_item {
			margin-top: 20rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 128rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}

		.menu_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.title {
			line-height: 1;
			font-size: 32rpx;
		}
	}

	.gz-pop {
		padding: 30rpx 40rpx;
		width: 646rpx;
		height: 100%;
		background: #FFFFFF;
		border-radius: 10rpx;

		.gz-t {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 49rpx;
		}

		.gz-c {
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #666666;
			line-height: 40rpx;
		}
	}
}

/deep/.u-navbar__content {
	background-color: transparent !important;
}

.parse {
	font-size: 28rpx;
	//子间距
	letter-spacing: 0.2em;
	line-height: 36rpx;

}
</style>
